<template>
  <van-swipe-cell class="mb-2">
    <div
      class="p-2 border-2 bg-[rgba(255,255,255,0.4)] border-white rounded-xl min-h-20 mx-2 flex items-center justify-between"
    >
      <div class="flex items-center space-x-3">
        <img :src="item?.ico" alt="icon" class="w-10 h-10" />
        <div class="text-white font-bold text-sm">
          <div>{{ item.title }}</div>
          <div v-for="input in item?.input" :key="input.title">
            {{ input.title }}: {{ input.value }}
          </div>
        </div>
      </div>

      <div>
        <button
          @click="edit()"
          class="block border border-white px-2 rounded text-white bg-[#54BCBD] mb-1"
        >
          修改
        </button>
        <button
          v-if="item?.status == '0'"
          @click="changeStatus('1', item.id)"
          class="block border border-white px-2 rounded text-white bg-[#54BCBD]"
        >
          上架
        </button>
        <button
          v-if="item?.status == '1'"
          @click="changeStatus('0', item.id)"
          class="block border border-white px-2 rounded text-white bg-red-300"
        >
          下架
        </button>
      </div>
    </div>
    <template #right>
      <van-button @click="del(item.id)" square text="删除" type="danger" class="delete-button" />
    </template>

    <editCollectionModal v-model:show-modal="show" :info="item" />
  </van-swipe-cell>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import editCollectionModal from '../modal/editCollection.vue'
import { EditCollectionApi, DeleteCollectionApi } from '@/apis/collection'
import { showConfirmDialog, showToast } from 'vant'

defineProps({
  item: {
    type: Object,
    default: () => {}
  }
})
const show = ref(false)

const emits = defineEmits(['edit'])

function changeStatus(status: string, id: string) {
  EditCollectionApi({ status, id }).then(() => {
    emits('edit')
    showToast({ message: status?.toString() == '0' ? '已关闭' : '已开启' })
  })
}

function edit() {
  show.value = true
}
function del(id: string) {
  showConfirmDialog({
    message: '确定删除吗？',
    confirmButtonColor: '#1989fa',
    cancelButtonColor: '#ee0a24'
  }).then(() => {
    DeleteCollectionApi({ ids: [id] }).then(() => {
      emits('edit')
      showToast({ message: '删除成功' })
    })
  })
}
</script>
<style scoped>
.delete-button {
  height: 100%;
}
</style>
